import React, { Component } from "react";
import { nanoid } from "nanoid";
import PropTypes from "prop-types";
import "./index.css";

export default class Header extends Component {
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };

  handlerKeyUp = (e) => {
    // console.log(e.key);
    const { keyCode, target } = e;
    if (keyCode !== 13) return;
    let todoVale = target.value.trim();
    if (!todoVale) return alert("输入不能为空");

    const todoObj = {
      id: nanoid(),
      name: todoVale,
      done: false,
    };

    this.props.addTodo(todoObj);
    target.value = "";
  };

  render() {
    return (
      <div className="todo-header">
        <input
          type="text"
          onKeyUp={this.handlerKeyUp}
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
